<script setup>
import FormComponentMixin from "../FormComponentMixin.js";
import {computed, ref,onMounted} from "vue";
import { getAPI } from '/@/utils/axios-utils';
import { SysOrgApi } from '/@/api-services/api';
// import WOrgPicker from "../../../common/WOrgPicker.vue";
// import WOrgTags from "../../../common/WOrgTags.vue";
const orgTreeData= ref([]) ;
const props = defineProps({
  ...FormComponentMixin.props
})
const emit = defineEmits([...FormComponentMixin.emits])
const _value = computed(FormComponentMixin.computed._value(props, emit))
const orgPicker = ref()

function selectOk(users){
  _value.value = users
  orgPicker.value.close()
}
// 查询机构数据
const loadOrgData = async () => {
	let res = await getAPI(SysOrgApi).apiSysOrgListGet(0);
	orgTreeData.value = res.data.result ?? [];
	
};
onMounted(async () => {
	await loadOrgData();
});

</script>

<template>
  <div style="display: flex; align-items: center">
    <el-cascader
          :options="orgTreeData"
          :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name', expandTrigger: 'hover' }"
          placeholder="所属机构"
          clearable
          class="w100"
          v-model="_value" >
          <template #default="{ node, data }">
            <span>{{ data.name }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
    </el-cascader>
    <!-- <el-button icon="plus" @click="orgPicker.open()" round></el-button>
    <w-org-tags inline v-model="_value" v-if="(_value || []).length > 0"/>
    <el-text class="w-placeholder">{{config.props.placeholder}}</el-text>
    <w-org-picker :multiple="config.props.multiple" ref="orgPicker" type="dept" :selected="_value" @ok="selectOk"/> -->
  </div>
</template>

<style scoped>
.w-placeholder {
  margin-left: 10px;
  color: var(--el-text-color-placeholder);
}
</style>
